<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>校园论坛系统 - 注册</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.5.1/jquery-3.5.1.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/register.js"></script>
    <!-- 自定义样式 -->
    <link href="css/login.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
    <form class="form-signin" method="post" action="register">
        <h3 class="form-signin-heading text-center">注册</h3>
        <label for="inputLoginName" class="sr-only">用户名</label>
        <input type="text" id="inputLoginName" name="loginName" class="form-control" placeholder="登录名" required autofocus>
        <label for="inputNickname" class="sr-only">昵称</label>
        <input type="text" id="inputNickname" name="nickname" class="form-control" placeholder="昵称" required>
        <label for="inputSignature" class="sr-only">个性签名</label>
        <input type="text" id="inputSignature" name="signature" class="form-control" placeholder="个性签名">
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
        <label for="confirmPassword" class="sr-only">确认密码</label>
        <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="确认密码" required>
        <span id="errorMessage"></span>
        <label for="selectGender" class="sr-only">性别</label>
        <select id="selectGender" name="gender" class="form-control" required>
            <option value="0">男</option>
            <option value="1">女</option>
        </select>
        <label for="inputPhoneNumber" class="sr-only">电话号码</label>
        <input type="tel" id="inputPhoneNumber" name="phoneNumber" class="form-control" placeholder="电话号码">
        <label for="inputEmail" class="sr-only">电子邮件</label>
        <input type="email" id="inputEmail" name="email" class="form-control" placeholder="电子邮件" required>
        <label for="selectRole" class="sr-only">权限</label>
        <select id="selectRole" name="role" class="form-control" required>
            <option value="0">用户</option>
            <option value="1">管理员</option>
        </select>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="registerButton">注册</button>
        <a class="btn btn-lg btn-login btn-block" href="login.jsp">返回登录</a>
    </form>
</div>

<script>
    $(document).ready(function () {
        //确认密码验证
        $("#confirmPassword").blur(function() {
            var password = $("#inputPassword").val();
            var confirmPassword = $(this).val();
            if (password !== confirmPassword) {
                $(this).addClass("is-invalid");
                $("#errorMessage").text("密码不一致，请重新输入。").show(); // 显示密码不一致的提示信息
            } else {
                $(this).removeClass("is-invalid");
                $("#errorMessage").hide(); // 隐藏密码不一致的提示信息
            }
        });

        $("#registerButton").click(function(){
            // 收集表单数据
            var formData = {
                username: $("#inputLoginName").val(),
                password: $("#inputPassword").val(),
                nickname: $("#inputNickname").val(),
                bio: $("#inputSignature").val(),
                gender: parseInt($("#selectGender").val()),
                phone: $("#inputPhoneNumber").val(),
                email: $("#inputEmail").val(),
                role:  parseInt($("#selectRole").val())
            };
            if (!validateForm(formData)) {
                return false; // 阻止表单提交
            }

            // 发送 AJAX 请求
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "registerServlet",
                data: JSON.stringify(formData),
                dataType: 'json',
                success: function (data) {
                    alert("注册成功！")
                    window.location.href("login.jsp")
                },
                error: function (e) {
                    // 处理错误响应
                    alert("注册失败！")
                }
            });
        });

    })

</script>
</body>
</html>
